<template>
  <div class="app-container order-list-index" style="padding-top: 0">
    <!-- 查询条件。 -->
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="90px" size="small" label-position="left" class="ry_form">
      <el-form-item :label="$t('fiance.paymentDate')" prop="createTime">
        <!-- <el-date-picker clearable size="small" v-model="queryParams.createTime" type="date"
          placeholder="选择出账日期"> -->
          <el-date-picker
            v-model="statementDate"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="--"
            :start-placeholder="$t('common.beginTime')"
            :end-placeholder="$t('common.deadline')"
            :picker-options="pickerOptions">
          </el-date-picker>
        <!-- </el-date-picker> -->
      </el-form-item>
      <el-form-item :label="$t('common.odd')" prop="financeNo">
        <el-input v-model="queryParams.financeNo"></el-input>
      </el-form-item>
      <el-form-item :label="$t('common.type')" prop="serviceType">
        <el-select v-model="queryParams.serviceType">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('fiance.payee')" prop="payeeName">
        <el-input v-model="queryParams.payeeName"></el-input>
      </el-form-item>
      <el-form-item :label="$t('fiance.drawee')" prop="payerName">
        <el-input v-model="queryParams.payerName"></el-input>
      </el-form-item>
      <el-form-item class="flex_one tr">
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >{{ $t('common.search') }}</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >{{ $t('common.reset') }}</el-button
        >
      </el-form-item>
    </el-form>
    <div v-loading="loading">
      <TableComponents
        ref="tableRef"
        :url="'/wms/bmsFinance/summaryOrderList'"
        :params="{ ...params, ...queryParams }"
        :columns="columnsAry"
        :req="{ page: 0, size: 10 }"
        :methodType="'paramsPost'"
        :return-data="returnData"
        @jumpDetails="jumpClick"
      >
        <el-table-column
          slot="operation"
          :label="$t('common.operation')"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="handleShowNextLevel(scope.$index, scope.row)"
            >
              {{ $t('common.toDetail') }}
            </el-button>
          </template>
        </el-table-column>
      </TableComponents>
    </div>
    <el-drawer
      :title="$t('common.detail')"
      :visible.sync="drawer"
      :before-close="handleClose"
      :append-to-body="true"
      :size="'calc(100vw - 234px);'"
      style="font-size: 18px;"
    >
      <FinancialOrderDetail ref="FinancialOrderDetailRef" />
    </el-drawer>
  </div>
</template>

<script>
import dayjs from "dayjs";
import {
  FreightForwarderPayable,
  CustomerAccountsReceivable,
} from "@/views/financial/const/index.js";
import FormComponents from "@/components/FormComponents/index.vue";
import TableComponents from "@/components/Table/list.vue";
import TabFilter from "@/components/Tab/tabFilter.vue";
import Tab from "@/components/Tab/detailTab.vue";
import FinancialOrderDetail from "./financialOrderDetail.vue";
import mixTime from '@/views/financial/bill/mixTime.js'


export default {
  name: "receivables",
  components: {
    FormComponents,
    TableComponents,
    TabFilter,
    Tab,
    FinancialOrderDetail
  },
  mixins: [mixTime],
  data() {
    return {
      ruleForm: {},
      loading: false,
      activeName: "1",
      FreightForwarderPayable,
      statementDate: '',
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        endTime: null,
        startTime: null,
        payeeName: null,
        payerName: null,
        financeNo: null,
      },
      tabs: [
        { name: this.$t('fiance.receivable'), value: "1" },
        { name: this.$t('fiance.copeWith'), value: "2" },
      ],
      columnsAry: [
        { prop: "financeNo", label: this.$t('fiance.No'), width: "150px" },
        { prop: "orderNo", label: this.$t('order.orderNo'), width: "110px" },
        { prop: "serviceTypeName", label: this.$t('fiance.serviceFeeCode') },
        { prop: "payerAmount", label: this.$t('fiance.copeWith') },
        { prop: "payeeAmount", label: this.$t('fiance.receivable') },
        { prop: "payeeName", label: this.$t('fiance.payeeName'), width: "100px" },
        { prop: "payerName", label: this.$t('fiance.payerName'), width: "100px" },
        { prop: "createTime", label: this.$t('common.createTime'), width: "150px" },
        { slot: "operation", prop: "operation", label: this.$t('common.operation') },
      ],
      rules: {},
      totalMoneyYuan: "",
      params: {},
      drawer: false,
      options: [
        { value: 'ORDER', label: '订单' },
        { value: 'STOCK_AGE', label: '库龄费' },
        { value: 'RENT', label: '库位费' },
      ]
    };
  },
  methods: {
    open(row) {
      this.params.customerId = row.customerId;
      // this.params.userId = this.$store.state.user.userId
      this.params.type = this.activeName;
      this.ruleForm = row;
      this.$refs.tableRef.setParams(this.params);
      this.getList();
    },
    handleClick(tab, event) {
      this.activeName = String(Number(tab.index) + 1);
      this.params.type = String(Number(tab.index) + 1);
      this.$refs.tableRef.setParams(this.params);
      this.getList();
    },
    handleSeacrh(v) {
      this.filterParams = {
        ...v.filterForm,
        ...v.filterParam,
      };
      this.$refs.tableRef.handleSearchParams(this.filterParams);
    },
    getList() {
      this.$nextTick(() => {
        this.$refs.tableRef.getList();
      });
    },
    handleShowNextLevel(index, row) {
        const _row = {
            ...row,
            ...this.ruleForm,
            orderId: row.orderId ? row.orderId : '',
            mainId: row.mainId ? row.mainId : '',
            serviceType: row.serviceType ? row.serviceType : '',
            customerId: row.customerId ? row.customerId : this.params.customerId
        }
      this.drawer = true;
      this.$nextTick(() => {
        this.$refs.FinancialOrderDetailRef.open(_row);
      });
    },
    handleClose() {
      this.drawer = false;
      // this.$emit('cancel')
    },
    jumpClick(v) {
      // console.log('v', v)
    },
    returnData(data) {
      return data.content.map((r) => {
        r.createTime = dayjs(r.createTime).format("YYYY-MM-DD HH:mm:ss");
        r.feeCodeName = (
          CustomerAccountsReceivable.find((t) => t.value === r.feeCode) || {}
        ).label;
        return r;
      });
    },
    toDetail(row) {},
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.queryParams.startTime = this.statementDate[0]
      this.queryParams.endTime = this.statementDate[1]
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.startTime = null
      this.queryParams.endTime = null
      this.statementDate = ''
      this.getList();
    },
  },
};
</script>
<style lang="scss">
.tableTooltip {
  border-top: 1px solid #ebeef5;
  border-left: 1px solid #ebeef5;
  border-right: 1px solid #ebeef5;
  background: #f5f7fa;
  padding: 12px;
  color: #606266;
}
::v-deep {
  .el-drawer__header > :first-child {
    font-size: 18px
  }
}
</style>
